import React, { useState, useEffect, use } from 'react';
import * as Icon from '@ant-design/icons';
import { Layout, Menu, } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { addTag } from '@/store/redux/table';
import menuData from '@/config';
const { Sider } = Layout;
const iconElements = (name: string) => React.createElement(Icon[name]);
const items = menuData.map((item: any) => {
    const menulist = {
        key: item.path,
        icon: item.icon ? iconElements(item.icon) : null,
        label: item.label,
    };
    if (item.children) {
        menulist.children = item.children.map((child: any) => ({
            key: child.path,
            icon: child.icon ? iconElements(child.icon) : null,
            label: child.label,
        }));
    }
    return menulist;
})
// 使用更准确的 props 类型定义
interface AsideProps {
    collapsed: boolean;

}
const Aside: React.FC<AsideProps> = ({ collapsed }) => {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const goPath = (e) => {
        let tabObj
        menuData.forEach((itme: any) => {
            if (itme.path === e.keyPath[e.keyPath.length - 1]) {
                tabObj = itme
                if (tabObj.children) {
                    tabObj = tabObj.children.find((child: any) => child.path === e.key)
                }
            }
        })
        dispatch(addTag(tabObj))
        navigate(e.key)
    }
    return (
        <div>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" style={{ textAlign: 'center', padding: '16px 0', fontSize: '24px', color: '#fff' }}>
                    {!collapsed ? '后台管理系统' : '后台'}
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={items}
                    style={{ height: '100vh', borderRight: 0 }}
                    onClick={goPath}
                />
            </Sider></div>
    )
}

export default Aside;